﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:setBundle basename="ApplicationMessage" />

<!DOCTYPE html>
<html lang="zh-CN">
<head>

  <%@ include file="/WEB-INF/include/meta.jsp"%>
  <%@ include file="/WEB-INF/include/css.jsp"%>

</head>

<body class="ihg-theme-draft">

  <%@ include file="/WEB-INF/include/header.jsp"%>
  <jsp:include page="/WEB-INF/include/submenu-session.jsp">
    <jsp:param name="currentUrl" value="${ctx.host}/sessions/${session.id}" />
  </jsp:include>

  <div class="container-fluid ihg-container has-ihg-sidemenu">

    <div class="ihg-breadcrumb">
      <ol class="breadcrumb border-breadcrumb no-bottom-border">
        <li class="active"><fmt:message key="assessor.386" /></li>
      </ol>
      <div class="pull-right">
        <c:set var="urlParam" value="subgroup=${subgroup}"/>
        <a href="${ctx.host}/sessions/${session.id}/peer-calibrations?${not empty subgroup ? urlParam : ''}" style="color: #155CB2; font-size: 16px;"><<&nbsp;<fmt:message key="assessor.376" /></a>
      </div>
    </div>

    <div class="ihg-content-layout" style="margin-top: 0px;">

      <ul class="list-unstyled instruction-list">
        <li><fmt:message key="assessor.387" /></li>
      </ul>

      <div class="col-xs-10">
        <div class="evaluate-tap-layout peer-calibration">
          <ul class="nav nav-tabs submit-tab">
            <li role="presentation"><a href="javascript:void(0);" data-href="${ctx.host}/sessions/${session.id}/peer-calibrations/${sessionCalibration.id}/achievement"><fmt:message key="competency.name.1" /></a></li>
            <li role="presentation"><a href="javascript:void(0);" data-href="${ctx.host}/sessions/${session.id}/peer-calibrations/${sessionCalibration.id}/cooperation"><fmt:message key="competency.name.2" /></a></li>
            <li role="presentation"><a href="javascript:void(0);" data-href="${ctx.host}/sessions/${session.id}/peer-calibrations/${sessionCalibration.id}/change"><fmt:message key="competency.name.4" /></a></li>
            <li role="presentation"><a href="javascript:void(0);" data-href="${ctx.host}/sessions/${session.id}/peer-calibrations/${sessionCalibration.id}/brand-hearted"><fmt:message key="competency.name.3" /></a></li>
            <li role="presentation" class="active"><a href="javascript:void(0);" data-href="${ctx.host}/sessions/${session.id}/peer-calibrations/${sessionCalibration.id}/development"><fmt:message key="competency.name.5" /></a></li>
            <li role="presentation"><a href="javascript:void(0);" data-href="${ctx.host}/sessions/${session.id}/peer-calibrations/${sessionCalibration.id}/management"><fmt:message key="competency.name.6" /></a></li>
          </ul>
          <div class="tab-content">
            <form class="form-horizontal" action="${ctx.host}/sessions/${session.id}/peer-calibrations/${sessionCalibration.id}/competency-submit" method="POST" data-validate="true">
              <input type="hidden" name="_method" value="PATCH" /> <input type="hidden" name="competencyId" value="${sessionCalibrationCompetency.id}" /> <input type="hidden" name="taskName" value="Peer Calibration Lead and Development" />
              <input type="hidden" name="nextCompetency" value="management" />
              <div class="clearfix" style="margin-top: 10px;">
                <div class="col-xs-9" style="background: #fff; padding: 5px 15px 15px;">
                  <table class="table ihg-table">
                    <thead>

                      <tr>
                        <td colspan="3">
                          <h4 style="margin: 0; color: #d96932; font-weight: bold;"><fmt:message key="assessor.388" /></h4>
                        </td>
                        <td colspan="2" class="visibility">
                          <h4 style="margin: 0; color: #d96932; font-weight: bold;"><fmt:message key="assessor.396" /></h4>
                        </td>
                      </tr>
                      <tr>
                        <td colspan="3">
                          <p><fmt:message key="assessor.389" /></p>
                        </td>
                        <td colspan="2" class="visibility">
                          <p class="strong-weak"><fmt:message key="assessor.397" /></p>
                        </td>
                      </tr>
                      <tr>
                        <th></th>
                        <th><fmt:message key="assessor.390" /><span style="font-size: 12px; display: block;"><fmt:message key="assessor.391" /></span></th>
                        <th style="width: 170px;"><fmt:message key="assessor.392" /></th>
                        <th class="visibility" style="width: 170px;"><fmt:message key="assessor.398" /></th>
                        <th class="visibility" style=""><fmt:message key="assessor.399" /></th>
                      </tr>
                    </thead>
                    <tbody>
                      <c:forEach var="anchorScore" items="${sessionCalibrationAnchorScores}" varStatus="status">
                        <c:choose>
                          <c:when test="${not empty anchorScore.score}">
                            <tr>
                              <td class="qualifyDR1 qualify-option">${anchorScore.anchor.competencyName}</td>
                              <td><a href="javascript:void(0)" class="anchor-link" data-option="${status.index}"><fmt:message key="${anchorScore.anchor.competencyName}.name" /></a></td>
                              <td class="calibration-result">
                                <input type="hidden" name="anchorScores[${status.index}].id" value="${anchorScore.id}"> 
                                <select name="anchorScores[${status.index}].score" class="select2 form-control competency-item" style="width: 170px;" data-validate="required" ${justView ? 'disabled' : ''}>
                                  <option value=""></option>
                                  <option value="warn">!</option>
                                  <option value="S" ${anchorScore.score.s ? 'selected' : ''}>S</option>
                                  <option value="C" ${anchorScore.score.c ? 'selected' : ''}>C</option>
                                  <option value="DN" ${anchorScore.score.dn ? 'selected' : ''}>DN</option>
                              </select></td>
                              <td class="recommendation visibility"><input class="competency-item" type="checkbox" name="strong" value="${anchorScore.id}" ${anchorScore.strong ? 'checked' : ''} ${justView ? 'disabled' : ''}></td>
                              <td class="recommendation visibility"><input class="competency-item" type="checkbox" name="weak" value="${anchorScore.id}" ${anchorScore.weak ? 'checked' : ''} ${justView ? 'disabled' : ''}></td>
                            </tr>
                          </c:when>
                          <c:otherwise>
                            <tr>
                              <td class="qualifyDR1 qualify-option">${anchorScore.anchor.competencyName}</td>
                              <td><a href="javascript:void(0)" class="anchor-link" data-option="${status.index}"><fmt:message key="${anchorScore.anchor.competencyName}.name" /></a></td>
                              <td class="calibration-result">
                                <input type="hidden" name="anchorScores[${status.index}].id" value="${anchorScore.id}"> 
                                <select name="anchorScores[${status.index}].score" class="select2 form-control competency-item" style="width: 170px;" data-validate="required" ${justView ? 'disabled' : ''}>
                                  <option value=""></option>
                                  <option value="warn" ${competencyScores[anchorScore.anchor.competencyName].warn ? 'selected' : ''}>!</option>
                                  <option value="S" ${competencyScores[anchorScore.anchor.competencyName].s ? 'selected' : ''}>S</option>
                                  <option value="C" ${competencyScores[anchorScore.anchor.competencyName].c ? 'selected' : ''}>C</option>
                                  <option value="DN" ${competencyScores[anchorScore.anchor.competencyName].dn ? 'selected' : ''}>DN</option>
                              </select></td>
                              <td class="recommendation visibility"><input class="competency-item" type="checkbox" name="strong" value="${anchorScore.id}" ${anchorScore.strong ? 'checked' : ''} ${justView ? 'disabled' : ''}></td>
                              <td class="recommendation visibility"><input class="competency-item" type="checkbox" name="weak" value="${anchorScore.id}" ${anchorScore.weak ? 'checked' : ''} ${justView ? 'disabled' : ''}></td>
                            </tr>
                          </c:otherwise>
                        </c:choose>
                      </c:forEach>
                      <tr>
                        <td colspan="5" style="text-align: left;">
                          <h4 style="margin: 0; color: #d96932; font-weight: bold;"><fmt:message key="assessor.393" /></h4>
                          <p><fmt:message key="assessor.394" /></p>
                        </td>
                      </tr>
                      <tr>
                        <td colspan="2" style="text-align: left; font-size: 15px; font-weight: bold; color: #c00000;"><fmt:message key="assessor.395" /></td>
                        <td><select name="score" class="select2 form-control competency-item" style="width: 170px;" data-validate="required" ${justView ? 'disabled' : ''}>
                            <option value=""></option>
                            <option value="S" ${sessionCalibrationCompetency.score.s ? 'selected' : ''}>S</option>
                            <option value="C" ${sessionCalibrationCompetency.score.c ? 'selected' : ''}>C</option>
                            <option value="DN" ${sessionCalibrationCompetency.score.dn ? 'selected' : ''}>DN</option>
                        </select></td>
                        <td colspan="2"></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="col-xs-3 visibility" style="position: static;">
                  <h4 style="margin: 10px 0 5px; color: #d96932; font-weight: bold;"><fmt:message key="assessor.400" /></h4>
                  <p><fmt:message key="assessor.401" /></p>
                  <textarea class="scorllbar-textarea competency-item" rows="15" placeholder="<fmt:message key="assessor.403-1" />" name="effective" data-validate="required" ${justView ? 'disabled' : ''}>${sessionCalibrationCompetency.effective}</textarea>
                  <p><fmt:message key="assessor.401-1" /></p>
                  <textarea class="scorllbar-textarea competency-item" rows="15" placeholder="<fmt:message key="assessor.403-2" />" name="inEffective" data-validate="required" ${justView ? 'disabled' : ''}>${sessionCalibrationCompetency.inEffective}</textarea>
                  <c:if test="${!justView}">
                    <button type="submit" class="btn btn-success" style="position: absolute; bottom: 10px;"><fmt:message key="assessor.406" /></button>
                  </c:if>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>

      <div class="col-xs-2">
        <div style="margin: 0 auto; width: 100px; height: 100px; border-radius: 100%; border: 1px solid #D88362; background: #F4F2ED;">
          <img src="${delegate.avatar}" style="border-radius: 100%; width: 100%">
        </div>
        <p class="text-center" style="margin-top: 10px; font-size: 16px; color: #888888;">${delegate.name}</p>
        <div class="text-center">
          <a href="${ctx.host}/sessions/${session.id}/peer-calibrations/${sessionCalibration.id}/competencies/${sessionCalibrationCompetency.id}/exercise-notes" data-target="#viewExerciseNotes" data-toggle="modal" class="btn btn-success" style="margin-top: 30px;"><fmt:message key="assessor.405" /> </a>
        </div>
        <div class="text-center" style="margin-top: 25px;">
          <a href="${ctx.host}/sessions/${session.id}/gm-meetings/finance-management-analysis?delegate=${delegate.id}" target="_blank" class="btn btn-defalut btn-danger" style="font-size: 14px;"><fmt:message key="assessor.356" /></a>
          <c:if test="${not empty sessionReport.ppt}">
            <a href="${sessionReport.ppt}" download="高管汇报PPT材料.pptx" class="btn btn-defalut btn-danger" style="font-size: 14px;"><fmt:message key="assessor.357" /></a>
          </c:if>
        </div>
      </div>

      <div class="scoring-wrap">
        <c:forEach var="anchorScore" items="${sessionCalibrationAnchorScores}" varStatus="status">
          <c:set var="competencyNameWrap" value="${anchorScore.anchor.competencyName}" />
          <div class="scoring-details" data-details="${status.index+1}" style="padding-top: 25px;">
            <a href="javascript:void(0);" class="btn btn-danger close-details pull-right">x</a>
            <p style="margin-left: 15px; margin-bottom: 20px; font-size: 18px; font-weight: bold; color: #707372;"><fmt:message key="${competencyNameWrap}.name" />:</p>
            <div class="details-item">
              <span class="label strength-label">DN</span>
              <p class="description"><fmt:message key="${competencyNameWrap}.dn" /></p>
            </div>
            <div class="details-item">
              <span class="label strength-label">C</span>
              <p class="description"><fmt:message key="${competencyNameWrap}.c" /></p>
            </div>
            <div class="details-item">
              <span class="label strength-label">S</span>
              <p class="description"><fmt:message key="${competencyNameWrap}.s" /></p>
            </div>

            <div class="scoring-layout">
              <div class="row scoring-item" style="background-color: transparent;">
                <div class="col-xs-6"></div>
                <div class="col-xs-3 color-erythrine text-center">${leadAssessor.name}</div>
                <div class="col-xs-3 color-erythrine text-center">${peerAssessor.name}</div>
              </div>
              <div class="row scoring-item">
                <div class="col-xs-6">
                  <strong><fmt:message key="assessor.242" /></strong>
                </div>
                <div class="col-xs-3 text-center">${not empty inBasketScores[competencyNameWrap] ? not empty inBasketScores[competencyNameWrap][leadAssessor.idString].score ? inBasketScores[competencyNameWrap][leadAssessor.idString].score.alias : '' : ''}</div>
                <div class="col-xs-3 text-center">${not empty inBasketScores[competencyNameWrap] ? not empty inBasketScores[competencyNameWrap][peerAssessor.idString].score ? inBasketScores[competencyNameWrap][peerAssessor.idString].score.alias : '' : ''}</div>
              </div>
              <div class="row scoring-item">
                <div class="col-xs-6">
                  <strong><fmt:message key="assessor.239" /></strong>
                </div>
                <div class="col-xs-3 text-center">${not empty meetingScores[competencyNameWrap] ? not empty meetingScores[competencyNameWrap][leadAssessor.idString] ? not empty meetingScores[competencyNameWrap][leadAssessor.idString]['Guest Meeting'] ? not empty meetingScores[competencyNameWrap][leadAssessor.idString]['Guest Meeting'].score ? meetingScores[competencyNameWrap][leadAssessor.idString]['Guest Meeting'].score.alias : '' : '' : '' : ''}</div>
                <div class="col-xs-3 text-center">${not empty meetingScores[competencyNameWrap] ? not empty meetingScores[competencyNameWrap][peerAssessor.idString] ? not empty meetingScores[competencyNameWrap][peerAssessor.idString]['Guest Meeting'] ? not empty meetingScores[competencyNameWrap][peerAssessor.idString]['Guest Meeting'].score ? meetingScores[competencyNameWrap][peerAssessor.idString]['Guest Meeting'].score.alias : '' : '' : '' : ''}</div>
              </div>
              <div class="row scoring-item">
                <div class="col-xs-6">
                  <strong><fmt:message key="assessor.240" /></strong>
                </div>
                <div class="col-xs-3 text-center">${not empty meetingScores[competencyNameWrap] ? not empty meetingScores[competencyNameWrap][leadAssessor.idString] ? not empty meetingScores[competencyNameWrap][leadAssessor.idString]['Colleague Meeting'] ? not empty meetingScores[competencyNameWrap][leadAssessor.idString]['Colleague Meeting'].score ? meetingScores[competencyNameWrap][leadAssessor.idString]['Colleague Meeting'].score.alias : '' : '' : '' : ''}</div>
                <div class="col-xs-3 text-center">${not empty meetingScores[competencyNameWrap] ? not empty meetingScores[competencyNameWrap][peerAssessor.idString] ? not empty meetingScores[competencyNameWrap][peerAssessor.idString]['Colleague Meeting'] ? not empty meetingScores[competencyNameWrap][peerAssessor.idString]['Colleague Meeting'].score ? meetingScores[competencyNameWrap][peerAssessor.idString]['Colleague Meeting'].score.alias : '' : '' : '' : ''}</div>
              </div>
              <div class="row scoring-item">
                <div class="col-xs-6">
                  <strong><fmt:message key="assessor.241" /></strong>
                </div>
                <div class="col-xs-3 text-center">${not empty meetingScores[competencyNameWrap] ? not empty meetingScores[competencyNameWrap][leadAssessor.idString] ? not empty meetingScores[competencyNameWrap][leadAssessor.idString]['GM Meeting'] ? not empty meetingScores[competencyNameWrap][leadAssessor.idString]['GM Meeting'].score ? meetingScores[competencyNameWrap][leadAssessor.idString]['GM Meeting'].score.alias : '' : '' : '' : ''}</div>
                <div class="col-xs-3 text-center">${not empty meetingScores[competencyNameWrap] ? not empty meetingScores[competencyNameWrap][peerAssessor.idString] ? not empty meetingScores[competencyNameWrap][peerAssessor.idString]['GM Meeting'] ? not empty meetingScores[competencyNameWrap][peerAssessor.idString]['GM Meeting'].score ? meetingScores[competencyNameWrap][peerAssessor.idString]['GM Meeting'].score.alias : '' : '' : '' : ''}</div>
              </div>
            </div>

          </div>
        </c:forEach>

      </div>

    </div>
  </div>
  <%@ include file="/WEB-INF/include/footer.jsp"%>
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource root="${ctx.resource}/build" type="script" src="js/page/session/during/peer-calibration/assessor/report-finalizing-view.js" />
  <script type="text/javascript">
    require( [ 'page/session/during/peer-calibration/assessor/report-finalizing-view' ], function ( page ) {
      page.init();
    })
  </script>

</body>
</html>